<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件语法糖</title>
</head>
<body>

<div id="app">
  <!--  2、使用组件-->
  <my-div1></my-div1>

  <my-div2></my-div2>
</div>

<script src="../js/vue.js"></script>
<script>

  /*
    ●在之前注册组件的方式，可能会有些繁琐。
      口Vue为了简化这个过程,提供了注册的语法糖。
      口主要是省去了调用Vue.extend()的步骤,而是可以直接使用一个组件对象来代替。
      口全局组件对象和局部组件对象的结构是一样的
   */

  // ■【注册全局组件的语法糖】
  // 1、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为组件对象，
  // 组件对象有一个template属性，属性值为模板信息
  Vue.component('myDiv1', {
    template: `
            <div>
              <h2>我是标题1</h2>
              <p>我是内容1</p>
            </div>
            `
  })

  //■【注册局部组件的语法糖】
  const app = new Vue({
    el: "#app",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 1、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    components: {
      //这里相当于将组件的创建与注册整合成了一个方式，注册组件时可以直接绑定对象，对象有个template属性，属性值就是我们的模板信息
      myDiv2: {
        template: `
            <div>
              <h2>我是标题2</h2>
              <p>我是内容2</p>
            </div>
            `
      }
    }
  });
</script>
</body>
</html>